<?php

echo '<div id="map" style="width: 600px; height: 500px">nn</div>';
echo "<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA2XIlarYB9hkOnQR02Sa-vxRXr_pnRQacMoyHcz-CnajqhXWEshRJjj_P4uG87mbRdi_op9lcPlPqoQ'type='text/javascript'></script>";




$codigo_js = "";
//$codigo_js .= 

//echo $javascript->codeblock($codigo_js);

echo $javascript->codeblock('

      // A function to create the marker and set up the event window
      // Dont try to unroll this function. It has to be here for the function closure
      // Each instance of the function preserves the contends of a different instance
      // of the "marker" and "html" variables which will be needed later when the event triggers.    
      function createMarker(point, icon, html) {
        var marker = new GMarker(point, icon);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
      }

     function load() {
       if (GBrowserIsCompatible()) {
         var map = new GMap2(document.getElementById("map"));
         map.addControl(new GSmallMapControl());

		 map.setCenter(new GLatLng(-31.88179167,-63.73319833), 14);
         map.enableDoubleClickZoom();
         map.setMapType(G_SATELLITE_MAP);



      // Read the data from example.xml
      var request = GXmlHttp.create();
      request.open("GET", "http://127.0.0.1/datagro/www/files/datos.xml", true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = GXml.parse(request.responseText);
          // obtain the array of markers and loop through it
          var markers = xmlDoc.documentElement.getElementsByTagName("marker");

		var icon1 = new GIcon();
		icon1.image = "http://127.0.0.1/datagro/www/img/marcadores/verde.png";
		icon1.iconSize = new GSize(2, 2);
		icon1.iconAnchor = new GPoint(6, 20);
		icon1.infoWindowAnchor = new GPoint(5, 1);

		
		var icon2 = new GIcon();
		icon2.image = "http://127.0.0.1/datagro/www/img/marcadores/rojo.png";
		icon2.iconSize = new GSize(2, 2);
		icon2.iconAnchor = new GPoint(6, 20);
		icon2.infoWindowAnchor = new GPoint(5, 1);

          for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
			var hum = parseFloat(markers[i].getAttribute("hum"));
			//alert("hum " + hum);
			//alert("lat " + lat);
			//alert("lng " + lng); 


            var point = new GLatLng(lat,lng);
            // create the marker
            //var marker = createMarker(point, icon);
            //map.addOverlay(marker);
			if(hum < 8) {
				//map.addOverlay(new GMarker(point, icon1));
			  var marker = createMarker(point,icon1, \'<div style="width:240px">Humedad: \'+hum+\'</div>\')
			  map.addOverlay(marker);
			}
			else {
				//map.addOverlay(new GMarker(point, icon2));
			  var marker = createMarker(point, icon2, \'<div style="width:240px">Humedad: \'+hum+\'</div>\')
			  map.addOverlay(marker);
			}
          }
          // put the assembled side_bar_html contents into the side_bar div
          //document.getElementById("side_bar").innerHTML = side_bar_html;
        }
      }
      request.send(null);
    }

   }
	  load();');



/*
echo $javascript->codeblock("
     function load() {
       if (GBrowserIsCompatible()) {
         var map = new GMap2(document.getElementById('map'));
         map.addControl(new GSmallMapControl());

		 map.setCenter(new GLatLng(-32.458429,-64.42194), 16);
         map.enableDoubleClickZoom();
         map.setMapType(G_SATELLITE_MAP);

		var bounds = map.getBounds();
		var southWest = bounds.getSouthWest();
		var northEast = bounds.getNorthEast();
		var lngSpan = northEast.lng() - southWest.lng();
		var latSpan = northEast.lat() - southWest.lat();


		var icon = new GIcon();
		icon.image = 'http://127.0.0.1/datagro/www/img/marcadores/verde.png';
		icon.iconSize = new GSize(2, 2);
		icon.iconAnchor = new GPoint(6, 20);
		icon.infoWindowAnchor = new GPoint(5, 1);

		for (var i = 0; i < 100; i++) {
		  var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
								  southWest.lng() + lngSpan * Math.random());
		  map.addOverlay(new GMarker(point, icon));
		}
	   }
	  }
	  load();");
*/
?>